<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>


<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

<script type="text/javascript">

	$(function(){


		$(".time").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "bottom-left"
		});



		$("#toActivitySaveBtn").click(function () {

			//modal("show") 打开模态窗口
			//modal("hide") 打开模态窗口

			$.ajax({

				url:"workbench/activity/getUser.do",               //请求路径
				data:{


				},              //请求参数
				type:"get",                //请求方式 get post
				dataType:"",            //对应后台响应得处理方式 text json
				success :function (data) {      //响应后台回来得数据

					var html="<option></option>"
					$.each(data,function (i,n) {

						html+= "<option value='"+n.id+"'>"+n.name+"</option>"


					})


					$("#create-owner").html(html)

					//js中使用EL表达市必须套双引号

					var id ="${user.id}"

					$("#create-owner").val(id);




					//处理完数据获取打开模态窗口
					$("#createActivityModal").modal("show");
				}

			})

		})

		//添加保存市场活动按钮
		$("#saveActivityBtn").click(function () {
			$.ajax({

				url:"workbench/activity/saveActivity.do",               //请求路径
				data:{

					"owner"  		:$.trim($("#create-owner").val()),
					"name"  		:$.trim($("#create-name").val()),
					"startDate" 	 :$.trim($("#create-startDate").val()),
					"endDate" 		 :$.trim($("#create-endDate").val()),
					"cost"  		:$.trim($("#create-cost").val()),
					"description"  	:$.trim($("#create-description").val()),




				},              //请求参数
				type:"post",                //请求方式 get post
				dataType:"",            //对应后台响应得处理方式 text json
				success :function (data) {      //响应后台回来得数据


				if (data.success) {



					//清空表单数据 重置表单 //reset();dom
					//document.getElementById("saveActivityForm").reset();
					//$("#saveActivityBtn")[0].reset();


				//	$("#createActivityModal").modal("hide")

					pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
					$("#createActivityModal").modal("hide")

				}else {

					alert("添加市场活动失败")


				}



				}


			})

		})

		/*pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
				,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));*/
		pageList(1,5);


		//为查询按钮绑定事件
		$("#searchActivityBtn").click(function () {


			$("#hidden-name").val($.trim($("#name").val()));
			$("#hidden-owner").val($.trim($("#owner").val()));
			$("#hidden-stateDate").val($.trim($("#startDate").val()));
			$("#hidden-endDate").val($.trim($("#endDate").val()));

			pageList(1,5)

		})

		//为全选单选按钮绑定事件
		$("#selectAll").click(function () {
			$("input[name=select]").prop("checked",this.checked)

		})

		$("#activityTbody").on("click",$("input[name=select]"),function () {

			$("#selectAll").prop("checked",$("input[name=select]").length== $("input[name=select]:checked").length)

		})

		//为删除按钮绑定事件
		$("#deleteActivityBtn").click(function () {
			var flag="";
			var $select= $("input[name=select]:checked")

			if ($("input[name=select]:checked")==0){

				alert("请选择需要删除的市场活动")

			} else {
				if (confirm("确定要删除以下数据吗")) {


					for (var i = 0; i<$select.length;i++){
						flag += "ids="+$($select[i]).val()

						if (i<$select.length){
							flag +="&"

						}
					}

					$.ajax({

						url:"workbench/activity/deleteActivity.do",               //请求路径
						data: flag,             //请求参数
						type:"post",                //请求方式 get post
						dataType:"",            //对应后台响应得处理方式 text json
						success :function (data) {      //响应后台回来得数据


							if (data.success) {

								pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));

							}else {

								alert("市场活动数据删除失败")
							}
						}

					})
				}
			}
		})



		//跳转到更新model页面，并取得勾选数据内容
		$("#editActivityBtn").click(function () {
			var $select= $("input[name=select]:checked")
			if ($select.length==0){
				alert("请选择一条需要修改的数据")
				return false
			} else if ($select>1){
				alert("请选择一条需要修改的数据")

				return false
			} else {
				var id =$select.val();

				$.ajax({

					url:"workbench/activity/toUpdateActivity.do",               //请求路径
					data:{
						"id": id

					},              //请求参数
					type:"post",                //请求方式 get post
					dataType:"",            //对应后台响应得处理方式 text json
					success :function (data) {      //响应后台回来得数据

						/*
						* //date:
						* List<user> uList
 						* Activity a
						*
						* */

						var html="<option></option>"
						$.each(data.dataList,function (i, n) {

							html+="<option value='"+n.id+"'>"+n.name+"</option>"
						});

						$("#edit-owner").html(html);

						$("#edit-id").val(data.a.id)
						$("#edit-name").val(data.a.name)
						$("#edit-owner").val(data.a.owner)
						$("#edit-startDate").val(data.a.startDate)
						$("#edit-endDate").val(data.a.endDate)
						$("#edit-cost").val(data.a.cost)
						$("#edit-description").val(data.a.description)



						$("#editActivityModal").modal("show")


					}

				})


			}


		})
		
		//为更新按钮绑定事件，执行市场活动修改操作
		$("#updateActivityBtn").click(function () {



			$.ajax({

				url:"workbench/activity/updateActivity.do",    //请求路径
				data:{
					"id"				:$.trim($("#edit-id").val()),
					"owner"				:$.trim($("#edit-owner").val()),
					"name"				:$.trim($("#edit-name").val()),
					"startDate"		    :$.trim($("#edit-startDate").val()),
					"endDate"			:$.trim($("#edit-endDate").val()),
					"cost"				:$.trim($("#edit-cost").val()),
					"description"		:$.trim($("#edit-description").val()),


				},              //请求参数
				type:"post",                //请求方式 get post
				dataType:"",            //对应后台响应得处理方式 text json
				success :function (data) {      //响应后台回来得数据


					if (data.success){

						//pageList(1,5)
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));

						$("#editActivityModal").modal("hide")

					}else {
						alert("市场活动数据修改失败")

					}




				}

			})
			
		})


		//为批量下载按钮绑定单击事件
		$("#exportActivityAllBtn").click(function () {

			window.location.href="workbench/activity/exportActivityAll.do"

		})

		//勾选批量导出市场活动
		$("#exportActivityXzBtn").click(function () {
			var $select=$("input[name=select]:checked")
			var ids="";
			for (var i=0;i<$select.length;i++){
				ids+="id="+ $($select[i]).val();
				if (i<$select.length-1){

					ids+= "&";
				}
		}

			window.location.href="workbench/activity/exportActivitySelect.do?"+ids


		})

		$("#importActivityBtn").click(function () {

			//获取文件名与文件格式
			var  fileName =$("#activityFile").val();
			var suffix =fileName.substr(fileName.lastIndexOf(".")+1)
			if (!(suffix=="xls" || suffix=="xlsx")){
				alert("文件格式不正确")
				return
			}
			//获取文件内容，并判断文件大小
			var activityFile = $("#activityFile")[0].files[0];
			if (activityFile.size>5*1024*1024){
				alert("文件超过5M")
				return
			}
			//将文件格式转换为json格式，并通过ajax传入后台
		   var formData=new FormData();
			formData.append("activityFile",activityFile);

			$.ajax({

				url:"workbench/activity/importActivity.do",               //请求路径
				data:formData,              //请求参数
				type:"post",                //请求方式 get post
				dataType:"json",            //对应后台响应得处理方式 text json
				processData:false,
				contentType:false,
				success :function (data) {      //响应后台回来得数据

				if (data.success){
					alert("成功导入数据"+data.count+"条")

				} else {
					alert("导入失败")
				}




				}

			})



		})





















		
	});


	function pageList(pageNo,pageSize ) {

		$("#selectAll").prop("checked",false)


		$("#name").val($.trim($("#hidden-name").val()))
		$("#owner").val($.trim($("#hidden-owner").val()))
		$("#startDate").val($.trim($("#hidden-stateDate").val()))
		$("#endDate").val($.trim($("#hidden-endDate").val()))



		$.ajax({

			url:"workbench/activity/searchActivity.do",               //请求路径
			data:{
				"pageNo"		:	pageNo,
				"pageSize"		:	pageSize,
				"name"			:	$.trim($("#name").val()),
				"owner"			:	$.trim($("#owner").val()),
				"startDate"	  :		$.trim($("#startDate").val()),
				"endDate"	  :		$.trim($("#endDate").val())


			},              //请求参数
			type:"get",                //请求方式 get post
			dataType:"",            //对应后台响应得处理方式 text json
			success :function (data) {      //响应后台回来得数据



				var html ="";
				$.each(data.dataList, function (i,n) {
					html+=	'<tr class="active">';

					html+=	'<td><input type="checkbox" name="select" value="'+n.id+'" /></td>';
					html+=
							"<td>" +"<a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/detailActivity.do?id="+n.id+"';\">"+n.name+"</a>"
							+"</td>";
					html+=	'<td>'+n.owner+'</td>';
					html+=	'<td>'+n.startDate+'</td>';
					html+=	'<td>'+n.endDate+'</td>';
					html+=	'</tr>';


				})
				//数据展示
				$("#activityTbody").html(html);

				var totalPages=data.searchCount%pageSize==0?data.searchCount/pageSize:parseInt(data.searchCount/pageSize)+1;
				//分页脚本
				$("#activityPage").bs_pagination({
					currentPage: pageNo, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数
					totalPages: totalPages, // 总页数
					totalRows: data.total, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,

					onChangePage : function(event, data){
						pageList(data.currentPage , data.rowsPerPage);
					}
				});

			}

		})

	}
	
</script>
</head>
<body>
		<input type="hidden" id="hidden-name">
		<input type="hidden" id="hidden-owner">
		<input type="hidden" id="hidden-stateDate">
		<input type="hidden" id="hidden-endDate">

		<!-- 导入市场活动的模态窗口 -->
		<div class="modal fade" id="importActivityModal" role="dialog">
			<div class="modal-dialog" role="document" style="width: 85%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
					</div>
					<div class="modal-body" style="height: 350px;">
						<div style="position: relative;top: 20px; left: 50px;">
							请选择要上传的文件：<small style="color: gray;">[仅支持.xls或.xlsx格式]</small>
						</div>
						<div style="position: relative;top: 40px; left: 50px;">
							<input type="file" id="activityFile">
						</div>
						<div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
							<h3>重要提示</h3>
							<ul>
								<li>操作仅针对Excel，仅支持后缀名为XLS/XLSX的文件。</li>
								<li>给定文件的第一行将视为字段名。</li>
								<li>请确认您的文件大小不超过5MB。</li>
								<li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
								<li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
								<li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
								<li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
							</ul>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 修改市场活动的模态窗口 -->
		<div class="modal fade" id="editActivityModal" role="dialog">
			<div class="modal-dialog" role="document" style="width: 85%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
					</div>
					<div class="modal-body">

						<form class="form-horizontal" role="form">

							<input type="hidden" id="edit-id">
							<div class="form-group">
								<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
								<div class="col-sm-10" style="width: 300px;">
									<select class="form-control" id="edit-owner">
										<%-- <option>zhangsan</option>
                                         <option>lisi</option>
                                         <option>wangwu</option>--%>
									</select>
								</div>
								<label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="edit-name" >
								</div>
							</div>

							<div class="form-group">
								<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control time" id="edit-startDate" >
								</div>
								<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control time" id="edit-endDate" >
								</div>
							</div>

							<div class="form-group">
								<label for="edit-cost" class="col-sm-2 control-label">成本</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="edit-cost" >
								</div>
							</div>

							<div class="form-group">
								<label for="edit-describe" class="col-sm-2 control-label">描述</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="edit-description"></textarea>
								</div>
							</div>

						</form>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary"  id="updateActivityBtn">更新</button>
					</div>
				</div>
			</div>
		</div>


		<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" id="saveActivityForm" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-owner">
								 <%-- <option>zhangsan</option>
								  <option>lisi</option>
								  <option>wangwu</option>--%>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-name">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startDate" readonly>
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endDate" readonly>
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveActivityBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	


	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="endDate">
				    </div>
				  </div>
				  
				  <button type="button" id="searchActivityBtn" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="toActivitySaveBtn"
				  <%--data-toggle="modal" data-target="#createActivityModal"--%>><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="editActivityBtn" data-toggle="modal"
						  data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span
						  class="glyphicon glyphicon-minus"></span> 删除
				  </button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                    <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                    <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
                </div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox"  id="selectAll"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="activityTbody">
						<%--<tr class="active">
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
							<td>2020-10-10</td>
							<td>2020-10-20</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
                            <td>2020-10-10</td>
                            <td>2020-10-20</td>
                        </tr>--%>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">

				<div id="activityPage"></div>
				<%--<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>--%>
				<%--<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>--%>
			</div>
			
		</div>
		
	</div>
</body>
</html>